<!--公司制度-列表-新增-->
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="opNotice">
    <div class="opNoticeTop">
      <div>资讯详情</div>
    </div>
    <div class="opNoticeMain">
      <div class="item">
        <div>发送部门：</div>
        <div>{{userInfoVal | strFun}}</div>     
      </div>
      <div class="item">
        <div>主题：</div>
        <div>{{titleVal | strFun}}</div>
      </div>
      <div class="item">
        <div>类目：</div>
        <div>
          {{regimeVal | strFun}}
        </div>
      </div>
      <div class="item">
        <div>正文：</div>
        <div class="editorBox"  v-html="inputContentHtml"></div>
      </div>
       <div class="item">
        <div>封面图片：</div>
        <div>
          <img :src="coverImg" alt="">
        </div>
      </div>
    </div>
    <!-- 弹出框选择部门人员组件 -->
    <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import addPelete from "../../../cModel/addDeptiUsers.vue";
export default {
  components: {
    "v-addPelete": addPelete
  },
  data() {
    return {
      updatePopShow: false, // 人员选择列表
      userselectpopLists: [], // 已选中的人员-编辑时使用

      orgIdVal: "",
      catalogIdVal: "",
      idVal: "",
      deptStr: "",
      userStr: "",
      regimeLists: [],

      userInfoVal: "", // 发送范围
      isRedReceiveVal: false,
      isGrayReceiveVal: true,

      isRedContentHtmlVal: false, // 正文
      isGrayContentHtmlVal: true, // 正文

      titleVal: "", // 标题
      isRedTitleVal: false,
      isGrayTitleVal: true,

      regimeVal: "公司制度", // 类目
      isRedRegimeVal: false,
      isGrayRegimeVal: true,

      editorData: null, //编辑器对象
      inputContentHtml: "", //渲染编辑器html
      contentVal: "", //编辑器html字符串
      inputText: "", //编辑器文本字符串

      isRedcoverImgVal: false,
      isGraycoverImgVal: true,
      coverImg: "/static/img/123.png",

      saveClickTrueOrFalse: true,
      isShowSelectOrInput: true
    };
  },
  filters: {
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    var self = this;
    self.orgIdVal = sessionStorage.getItem("ORGID");
    self.idVal = self.$route.query.id;
    self.catalogIdVal = sessionStorage.getItem("catalogIdVal");
    self.getListDetail();
    self.IdlistFun();
  },
  mounted() {
  },
  methods: {
    // 选择成员
    setReceiverClick() {
      var self = this;
      this.updatePopShow = true;
    },
    // 选择人员确认
    affirmUserListsClick(val) {
      var self = this;
      if (val) {
        var deptListsArr = [];
        var userListsArr = [];
        if (val.userLists.length > 0) {
          val.userLists.forEach(function(ele, ind) {
            userListsArr.push(ele.memberId);
          });
          self.memberIdVals = userListsArr.join(","); // 成员id
          self.userStr =
            val.userLists[0].name + "等" + val.userLists.length + "个人员。";
        }
        if (val.deptLists.length > 0) {
          val.deptLists.forEach(function(ele, ind) {
            deptListsArr.push(ele.memberId);
          });
          self.deptsIdVals = deptListsArr.join(","); // 部门id
          self.deptStr =
            val.deptLists[0].name + "等" + val.deptLists.length + "个部门。";
        }
        self.userselectpopLists = val;
        self.userInfoVal = "你选择了" + self.deptStr + self.userStr;
      } else {
        self.userselectpopLists = [];
        self.memberIdVals = "";
        self.deptsIdVals = "";
        self.userInfoVal = "请选择成员";
      }
      this.updatePopShow = false;
    },
    // 选择人员取消
    cancelUserListsClick() {
      this.updatePopShow = false;
    },
    // 查询资讯详情
    getListDetail() {
      var self = this;
      self
        .getWebInfoDetail({
          id: self.idVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.deptStr = data.data.departmentName;
              self.userInfoVal = data.data.departmentName;
              self.titleVal = data.data.title;
              self.inputContentHtml = data.data.content;
              self.coverImg = data.data.pictureUrl;
              self.contentVal = data.data.content;
              self.regimeVal = data.data.catalogName;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 选择类目
    selectregimeVal() {
      console.log(this.regimeVal);
    },
    // 目录结构列表
    IdlistFun() {
      var self = this;
      self
        .getWebInfoParent({
          orgId: self.orgIdVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data[1].lower) {
                self.isShowSelectOrInput = true;
                self.regimeLists = data.data[1].lower;
                // self.regimeVal = data.data[1].lower[0].id;
              } else {
                self.isShowSelectOrInput = false;
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    ...mapActions([
      "getWebInfoDetail",
      "getWebInfoParent",
      "getWebInfoUpdate",
      "getfileuploadPic"
    ])
  },
  watch: {
    authorVal(val) {
      if (val) {
        var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,10}$/);
        if (strReg.test(val) == false) {
          this.isRedAuthorVal = true;
          this.isGrayAuthorVal = false;
        } else {
          this.isRedAuthorVal = false;
          this.isGrayAuthorVal = true;
        }
      } else {
        this.isRedAuthorVal = false;
        this.isGrayAuthorVal = true;
      }
    },
    titleVal(val) {
      if (val) {
        var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,15}$/);
        if (strReg.test(val) == false) {
          this.isRedTitleVal = true;
          this.isGrayTitleVal = false;
        } else {
          this.isRedTitleVal = false;
          this.isGrayTitleVal = true;
        }
      } else {
        this.isRedTitleVal = false;
        this.isGrayTitleVal = true;
      }
    },
    contentVal(val) {
      var self = this;
      if (val) {
        if (val.length > 0 && val.length < 2000) {
          this.isRedContentHtmlVal = false;
          this.isGrayContentHtmlVal = true;
        } else {
          this.isRedContentHtmlVal = true;
          this.isGrayContentHtmlVal = false;
        }
      } else {
        this.isRedContentHtmlVal = true;
        this.isGrayContentHtmlVal = false;
      }
    }
  }
};
</script>
<style scoped>
.opNotice {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop div {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
}

.opNoticeTop {
  width: 100%;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.opNoticeMain .item span {
  color: rgb(180, 16, 16);
}

.opNoticeMain .item input {
  width: 240px;
  height: 34px;
  border-radius: 4px;
  padding-left: 20px;
}

.opNoticeMain .item select {
  width: 200px;
  height: 34px;
  border-radius: 4px;
  padding-left: 20px;
  color: #8e8f94;
}

.opNoticeMain .item > div:nth-child(1) {
  margin-right: 10px;
}

.opNoticeMain .item:nth-child(2) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(3) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(4) > div:nth-child(1) {
  margin-left: 28px;
}

.opNoticeMain .item:nth-child(4),
.opNoticeMain .item:nth-child(5) {
  align-items: flex-start;
}

.opNoticeMain .item:nth-child(5) {
  margin-top: 24px;
  position: relative;
}

.opNoticeMain .item:nth-child(5) img {
  width: 80px;
  height: 80px;
  border: 1px solid #d9d9d9;
}

.opNoticeMain .item:nth-child(5) input {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: #38adff;
  font-size: 14px;
  color: #fff;
  position: absolute;
  left: 183px;
  text-align: center;
  padding: 0;
  bottom: 40px;
  cursor: pointer;
}

#coverImgTips {
  /* color: #8f8e94; */
  padding-bottom: 10px !important;
}

.button {
  display: flex;
  justify-content: center;
  margin: 30px auto;
}

.button > div {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  margin-right: 50px;
  cursor: pointer;
}

.button > div:nth-child(1) {
  background: #38adff;
}

.button > div:nth-child(2) {
  background: #8e8f94;
}

/* 编译器 */

.editorBox {
  width: 80%;
}

.opNoticeMain .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 24px;
}

#inputTips {
  display: inline;
  margin-left: 20px;
}

#editorTips {
  margin-top: 10px;
}

/* ***************************************************** */

.centerLeftBotOneI {
  width: 310px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #000;
}

.selectPopup-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}

.selectPopup-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}

.redBorder {
  border: 1px solid #38adff !important;
}

.grayBorder {
  border: 1px solid #d9d9d9 !important;
}

.redTest {
  color: #38adff !important;
}

.grayTest {
  color: #8e8f94 !important;
}

input::-webkit-input-placeholder {
  color: #8e8f94;
  font-size: 13px;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #8e8f94;
  font-size: 13px;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #8e8f94;
  font-size: 13px;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #8e8f94;
  font-size: 13px;
}
</style>